// web端样式
.web-container {
    .indexBanner {
        width: 100%;
        height: 560px;
    }

    .section_content {

        // 第一部分
        .aboutBox {
            width: 100%;
            background-color: #fff;
            border-radius: 10px;
            padding-bottom: 100px;

            .boxItem {
                display: flex;
                align-items: center;
                justify-content: center;

                .left {
                    margin-right: 252px;

                    .pageH3 {
                        width: 691px;
                        margin: 40px 0px 40px;
                    }

                    .redButton {
                        margin: 0;
                    }
                }

                .right {
                    width: 200px;
                    height: 461px;
                }
            }
        }

        .ForumContainer {

            // 轮播区域
            .topBox {
                display: flex;

                .leftBox {
                    .img {
                        width: 780px;
                        height: 502px;
                        background-repeat: no-repeat;
                        background-size: cover;
                        border-radius: 20px;
                        position: relative;

                        .msg {
                            width: 780px;
                            position: absolute;
                            bottom: 30px;
                            display: flex;
                            align-items: center;
                            padding: 0px 30px 0px;
                            justify-content: space-between;
                            box-sizing: border-box;

                            .msgTtile {
                                font-weight: 500;
                                font-size: 26px;
                                color: #ffffff;
                            }

                            .nextPage {
                                width: 50px;
                                height: 50px;
                                background: #ffffff;
                                border-radius: 50%;
                                text-align: center;
                                line-height: 50px;
                                cursor: pointer;

                                .el-icon-right {
                                    color: #000000;
                                }
                            }
                        }
                    }
                }

                .rightMsg {
                    display: flex;

                    .rightItem {
                        margin-left: 40px;

                        .rightTitle {
                            .msgTitle {
                                font-weight: 500;
                                font-size: 20px;
                                color: #000000;
                                margin-top: 20px;
                            }

                            .rightData {
                                font-weight: 500;
                                font-size: 14px;
                                color: #98a6c9;
                                margin-bottom: 10px;
                            }

                            .rightContent {
                                width: 268px;
                                font-weight: 500;
                                font-size: 16px;
                                color: #555555;
                            }
                        }
                    }
                }
            }

            .bottomBox {
                margin-top: 48px;
                display: flex;
                justify-content: space-between;

                .rightItem {
                    .rightTitle {
                        .msgTitle {
                            font-weight: 500;
                            font-size: 20px;
                            color: #000000;
                            margin-top: 20px;
                        }

                        .rightData {
                            font-weight: 500;
                            font-size: 14px;
                            color: #98a6c9;
                            margin-bottom: 10px;
                        }

                        .rightContent {
                            width: 268px;
                            font-weight: 500;
                            font-size: 16px;
                            color: #555555;
                        }
                    }
                }
            }
        }

        // 百家论坛轮播
        .swiper-container {
            width: 100%;

            .swiper-slide {
                width: 100%;
                // display: flex;
                // justify-content: space-between;

                // .leftBox {
                //     width: 780px;
                //     height: 502px;
                //     background-repeat: no-repeat;
                //     background-size: contain;

                //     .leftBoxMessage {
                //         padding-top: 429px;
                //         display: flex;
                //         justify-content: space-around;
                //         align-items: center;

                //         .boxTitle {
                //             font-weight: 500;
                //             font-size: 26px;
                //             color: #FFFFFF;
                //         }

                //         .rightArrow {
                //             width: 50px;
                //             height: 50px;
                //             background: #ffffff;
                //             border-radius: 50%;
                //             display: flex;
                //             align-items: center;
                //             justify-content: center;
                //             cursor: pointer;

                //             .el-icon-right {
                //                 font-size: 30px;
                //                 color: #000000;
                //             }
                //         }
                //     }
                // }

                // .rightBox {
                //     display: flex;

                //     .forumBox {

                //         .topImg {
                //             width: 370px;
                //             height: 300px;
                //             background-repeat: no-repeat;
                //             background-size: contain;
                //         }

                //         .bottomMsg {
                //             padding-left: 16px;
                //             margin-top: 20px;

                //             .pageH4 {
                //                 margin-top: 10px;
                //                 width: 338px;
                //             }
                //         }
                //     }

                //     .forumBox:first-child {
                //         margin: 0px 40px 0px 0px;
                //     }
                // }
            }
        }

    }
}

// mobile端样式
.mobile-container {
    .indexBanner {
        width: 100%;
    }

    .section_content {

        // 祭祖常識
        .aboutBox{
            width: 100%;
            background-color: #fafafa;
            border-radius: 10px;
            padding: 16px;
            box-sizing: border-box;

            .pageH3{
                text-indent: 20px;
            }

            .redButton{
                margin:16px auto 0px;
            }
        }


        // 移动端百家论坛
        .mobileForum {
            .mobileContent {

                .contentItem {
                    display: flex;
                    margin-bottom: 16px;

                    .leftUrl {
                        width: 49%;
                        height: 117px;
                    }

                    .rightMsg {
                        width: 49%;
                        margin: 2px 0px 0px 10px;

                        .pageH4 {
                            margin: 4px 0px 13px;
                        }
                    }
                }
            }
        }
    }
}

// ipad端样式
.ipad-container {}